<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>黔西南</title>
    <style>
        * {
            scroll-behavior: smooth;
        }

        main {
            background-image: url(res/qxn0.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }

        main h2,
        main p {
            margin: 20px auto;
            max-width: 50%;
        }

        main h2 {
            text-align: center;
        }

        .four .fp {
            display: none;
        }

        #chun {
            margin-left: 37%;
        }

        .four {
            display: inline-block;
        }

        .four h3 {
            margin: 0px;
            padding: 30px;
        }

        #chun img {
            display: block;
            position: absolute;
            left: 14%;
        }

        #xia h3:hover~img {
            display: block;
            position: absolute;
            left: 14%;
        }

        #qiu h3:hover~img {
            display: block;
            position: absolute;
            left: 14%;
        }

        .four:hover img {
            display: block;
            position: absolute;
            left: 14%;
        }

        #white {
            margin: 750px 100%;
        }

        .mainpic {
            margin-left: 25%;
        }

        #foot {
            background-color: rgb(207, 209, 209);
            max-width: 100%;
            height: 140px;
            text-align: center;
            padding-top: 7px;
        }

        #foot a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<body>
    <header> </header>
    <main>
        <h2>关于黔西南</h2>
        <p>黔西南布依族苗族自治州位于贵州省西南部，地处滇黔桂三省(区)结合部，境内分布有布依族.苗族，回族等33个少数民族。气候上“春早花期长、夏凉雨水丰，秋爽云天高、冬暖树常绿”，2019年被中国气象协会评为“黔西南·中国四季康养之都”，亦有奇峰.峡谷.飞瀑.云海、温泉、溶洞，天坑等得天独厚的自然景观，令人叹为观止，流连忘返。
        </p>
        <h2>四季黔西南</h2>

        <!--四季图片展示-->

        <div id="pictitle">
            <div id="chun" class="four">
                <h3>春</h3>
                <img src="res/qxn1.png" id="cc">
            </div>
            <div id="xia" class="four">
                <h3>夏</h3>
                <img src="res/qxn2.jpeg" id="xx" class="fp">
            </div>
            <div id="qiu" class="four">
                <h3>秋</h3>
                <img src="res/qxn3.jpeg" id="qq" class="fp">
            </div>
            <div id="dong" class="four">
                <h3>冬</h3>
                <img src="res/qxn4.jpeg" id="dd" class="fp">
            </div>
        </div>
        <div id="white"> </div>
        <h2>好动黔西南</h2>
        <img src="res/xn5.jpg" width="50%" class="mainpic">
        <h2>好艺黔西南</h2>
        <img src="res/xn6.jpg" width="50%" class="mainpic">
        <h2>好味黔西南</h2>
        <img src="res/xn7.jpg" width="50%" class="mainpic">

    </main>

    <!--页脚-->
    <footer>
        <div id="foot">
            <p>部分资料来自网络&nbsp;用于作业效果展示</p>
            <a href="../report.html" target="_blank">「作业报告」</a>
        </div>
    </footer>

</body>